<template>
	<view class="video_box" @click.stop="playVideo">
		<view class="video_content" v-if="!props.cover">
			<image class="video_content_icon" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-149.png"></image>
		</view>
		<view class="cover_image_box" v-if="props.cover">
			<image class="cover_image" :src="props.cover"></image>
			<image class="cover_image_icon" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-149.png"></image>
		</view>
		<videoPopup ref="videoPopupRef"></videoPopup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import videoPopup from './components/videoPopup.vue'
	const props = defineProps({
		src: {
			type: String,
			default: ''
		},
		cover: {
			type: String,
			default: ''
		},
	})
	const videoPopupRef = ref()
	
	const playVideo = () => {
		videoPopupRef.value.open(props.src)
	};
</script>

<style lang="scss" scoped>
	.video_box {
		width: 100%;
		height: 100%;
		
		.video_content {
			width: 100%;
			height: 100%;
			background-color: #1a1a1a;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.video_content_icon {
				width: 60rpx;
				height: 60rpx;
			}
		}
		
		.cover_image_box {
			width: 100%;
			height: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			
			.cover_image {
				width: 100%;
				height: 100%;
			}
			.cover_image_icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>
